import { useState,useEffect,useRef} from 'react';
import { useNavigate } from "react-router-dom";
import { runInAction } from 'mobx';
import { observer } from 'mobx-react';
import { Popover } from 'antd';

import store from '@/store/public';
import style from '@/components/header/header.module.css';
import logoDark from '@/static/images/icon/logo-dark.svg';
import logoLight from '@/static/images/icon/logo-light.svg';
import moreDark from '@/static/images/topbar/icon-more-dark.svg'
import moreLight from '@/static/images/topbar/icon-more-light.svg'
import moon from '@/static/images/topbar/icons/moon.svg'
import sunny from '@/static/images/topbar/icons/sunny.svg'
import langDark from '@/static/images/topbar/lang-dark.svg';
import langLight from '@/static/images/topbar/lang-light.svg';
import noticeDark from '@/static/images/topbar/notice-dark.svg';
import noticeLight from '@/static/images/topbar/notice-light.svg';
import downloadDark from '@/static/images/topbar/download-dark.svg';
import downloadLight from '@/static/images/topbar/download-light.svg';

import More from '@/components/header/components/more/more';
import NavLogin from '@/components/header/components/navLogin/navLogin';
import NavUser from '@/components/header/components/navUser/navUser';

function Header(value){
	let bodyWidth = store.bodyWidth;
	let bodyHeight = store.bodyHeight;
	const navigate = useNavigate();
	let moreRef = useRef(null);
	function changeTheme(){
		runInAction(()=>{
			store.theme = store.theme === 'dark'?'light':'dark';
		})
	}
	let theme = store.theme;
	let more = <>
		<Popover
			overlayClassName={style.morePoper}
			arrow={false}
			getPopupContainer={() => moreRef.current }
			mouseEnterDelay={0}
			content={<More />}
			overlayStyle={{}}
			trigger="hover"
		>
			<div ref={moreRef} className={style.more+' '+ (theme==='dark'?style.dark:style.light) + ' ' + style.arrow+' ' + ' pr18'}>
				<img src={ theme === 'dark'?moreLight:moreDark } />
			</div>
		</Popover>
	</>;
	let mHander = <>
		{ !store.isMobilePlatform?<li className={'pl8 pr8 fs14 left '+style.line}>|</li>:'' }
		<li className={'flex pl8 pr8 fs14 left '+style.headerMenuBtn+' '+(theme==='dark'?style.menuDark:style.menuLight)}><b></b></li>
	</>;
	let pcHander = <>
		<li className={'pl8 pr8 fs14 left '+style.line}>|</li>
		<li className='pl8 pr8 fs14 left'><img src={theme==='dark'?downloadDark:downloadLight} /></li>
		<li className='pl8 pr8 fs14 left'><img src={theme==='dark'?noticeDark:noticeLight} /></li>
		<li className='pl8 pr8 fs14 left'><img src={theme==='dark'?langDark:langLight} /></li>
		<li className='ml10 fs14 left' onClick={changeTheme}><img src={theme==='dark'?sunny:moon} /></li>
	</>;
	let pcLinks = <>
		<li className='pl12 pr12 fs14 left'>行情</li>
		<li className={'pl12 pr15 fs14 mr10 left '+style.arrow+' '+(theme==='dark'?style.dark:style.light)}>现货交易</li>
		<li className={'pl12 pr15 fs14 mr10 left '+style.arrow+' '+(theme==='dark'?style.dark:style.light)}>衍生品交易</li>
		<li className='pl12 pr12 fs14 left'>帮助中心</li>
		<li className='pl12 pr12 fs14 left'>跟单</li>
		<li className='pl12 pr12 fs14 left'>社区</li>
	</>;
	return (
		<>
			<div className={style.header+' flex-row cb as pl15 pr15'}>
				<div className={style.logoContainer+' flex-row as'}>
					<h1 className="mode-logo mr20"><img onClick={ () => navigate('/') } src={theme==='dark'?logoLight:logoDark} /></h1>
					{
						!store.isMobilePlatform?more:''
					}
				</div>
				<div className={style.navContainer+' flex-row cb as pl15'}>
					<ul className={style.navScrollBox}>
						{
							!store.isMobilePlatform
							?pcLinks
							:''
						}
					</ul>
					<ul className={style.navUser+' as flex'}>
						{ store.token ? <NavUser /> : '' }
						{ !store.token ? <NavLogin /> : '' }
						{ !store.isDeskPlatform
							?mHander
							:pcHander
						}
					</ul>
				</div>
			</div>
		</>
	)
}
export default observer(Header);